<template>
  <el-table
      ref="multipleTableRef"
      v-loading="loading"
      :data="tableData"
      border
      stripe
      :row-key="rowKey"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @header-dragend="surverWidth"
  >
    <el-table-column type="selection" width="55"/>
    <template v-for="(item,index) in  tableColumns" :key="index+''+item.prop">
      <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          show-overflow-tooltip
          class-name='allowDrag'
          resizable
          sortable
      >
        <template #header>
          <slot name="tableHead" :item="item"></slot>
        </template>
        <template #default="scope">
          <slot name="tableColumn" :scope="{row:scope.row,index:scope.$index,prop:item.prop}"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>

import Sortable from 'sortablejs'
import {reactive, ref, onMounted, nextTick, toRefs} from "vue";

export default {
  name: "tzsTable",
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true
    },
    rowKey: {
      //表格中的 row-key
      type: String,
      default: ''
    },
  },
  // 防止表格抖动
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs.multipleTableRef.doLayout()
    })
  },
  setup(props, context) {
    let multipleTableRef = ref();
    const sortables = ref(null)
    let {columns, rowKey} = reactive(props);
    let tableColumns = columns
    const handleSelectionChange = (arr) => {
      let ids = arr.map(item => item[rowKey]);
      context.emit("handleSelectionChange", ids, arr);
    }
    // 选择或者取消全部
    const handAllSelected = (list) => {
      multipleTableRef.value.toggleAllSelection();
    }
    //列拖拽,选择和序号不能拖拽
    const columnDrop = () => {
      const wrapperTr = document.querySelector('.el-table__header tr')
      let sortable = Sortable.create(wrapperTr, {
        handle: '.allowDrag',
        ghostClass: 'dragColbg',
        chosenClass: 'dragColbg',
        animation: 150,
        delay: 0,
        onStart: () => {
          console.log("拖拽开始")
        },
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex) return;
          //删除并获取当前行
          const currRow = tableColumns.splice(evt.oldIndex - 1, 1)[0]
          //再拖动结束位置插入当前行
          tableColumns.splice(evt.newIndex - 1, 0, currRow)
          console.log("拖拽结束")
        },
      })
    };
    const surverWidth =()=>{

    }
    onMounted(async () => {
      nextTick(() => {
        columnDrop('t1');
      });
    });
    return {
      handleSelectionChange,
      handAllSelected,
      tableColumns,
      multipleTableRef,
      sortables,
      surverWidth,
    }
  },
  created() {

  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>
